<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试.html</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>

<script type="text/javascript">
    let data = {
        name: 'zhuang',
        address: '北京',
    }

    // 创建一个监控的实例对象 用于监控data中的属性变化
    const obs = new Obserber(data)
    console.log(obs)

    //准备一个vm 实例对象
    let vm = {}
    vm._data = data = obs

    function Obserber(obj) {
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)
        // 遍历
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    console.log("被改变了 重新解析模板 生成虚拟的DOM……")
                    obj[k] = val
                }
            })
        })
    }
</script>
</body>
</html>